#native('hello.js');

class DartChartWrapper {
  String chartType;
  String containerId;
  Map<String, String> options;
  List<List<var>> dataTable;
  /**
   * An arbitrary name for the chart. This is not shown anywhere on the chart, 
   * unless a custom chart is explicitly designed to use it.
   */
  String chartName;
  //TODO(efortuna): figure out these extra parameters.
  String dataSourceUrl;
  String query;
  num refreshInterval;
  var view; //TODO(efortuna) what is this?

  DartChartWrapper(this.chartType, this.containerId ){ /*, [this.options = {}, 
      this.dataTable = new List<List<var>>(), this.dataSourceUrl = '', 
      this.query = '', this.refreshInterval = 1, this.view = null]) {*/
    load_javascript();
  }

  load_javascript() native """
  google.load('visualization', '1');
  google.setOnLoadCallback(drawChart);""";

  /**
   * Draws the chart. You must call this method after any changes that you make 
   * to the chart or data to show the changes.
   *
   *   opt_container_ref [Optional] - A reference to a valid container element 
   * on the page. If specified, the chart will be drawn there. If not, the chart 
   * will be drawn in the element with ID specified by containerId.
   */
  //TODO(efortuna): opt_container_ref, and pass arguments.
  void draw([String opt_container_ref = null]) {
    if (opt_container_ref != null) {
      containerId = opt_container_ref;
    }
  }
  

  //TODO(efortuna)
  toJSON(){}
  
  /**
   * If this chart gets its data from a locally-defined DataTable, will return a
   * reference to the chart's DataTable. If this chart gets its data from a data
   * source, it will return null.
   *
   * Any changes that you make to the returned object will be reflected by the 
   * chart the next time you call ChartWrapper.draw().
   */
  //TODO(efortuna)
  getDataTable(){}

  /**
   * Returns a reference to the chart created by this ChartWrapper, for example 
   * a google.visualization.BarChart or a google.visualization.ColumnChart. 
   * This will return null until after you have called draw() on the 
   * ChartWrapper object, and it throws a ready event. Methods called on the 
   * returned object will be reflected on the page.
   */
  //TODO(efortuna)
  var getChart(){}
  getQuery(){}
  getOption(key, [opt_default_val]){}
  getView(){}
  setDataTable(table){}
  setQuery(query_string){}
  setRefreshInterval(interval){}
  setOption(key, value){}
  setOptions(options_obj){}
  setView(view_spec){}

  //TODO(efortuna): only add onReady listener if haven't added it already.
  addListener(String eventType, var func) native """
  google.visualization.events.addListener(wrapper, 'ready', onReady);
  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  function usefulHandler() {
    alert('Mouseover event!');
  }
  """;
}

void main() {
  new DartChartWrapper('ColumnChart', 'chart_div');
}
